<template>
	<!-- 商品类型筛选 -->
	<scroll-view class="goods_type_select_box" :class="{ pink: color == 'pink' ,vip: color == 'vip'}" scroll-x="true" scroll-with-animation="true" :scroll-into-view="'view' + (typeIndex - 2)">
		<view class="goods_type_options">
			<view v-for="(item,index) of typeList" :key="index" :class="{active:index == typeIndex}" @click="onType(index)" :id="'view' + index">{{item.name}}</view>
		</view>
	</scroll-view>
</template>
 
<script>
export default {
	props: {
		color: {
			type: [String, Number],
			default() {
				return 'white';
			}
		},
		type: {
			type: [String, Number],
			default() {
				return 'mall';
			}
		},
		typeId:{
			type: [String, Number],
			default() {
				return "";
			}
		}
	},
	data() {
		return {
			typeIndex:0,
			typeList:[
				{
					name:"全部",
					objId:""
				}
			]
		};
	},
	created() {
		this.pageData();
		
	},
	methods: {
		onType(index){
			this.typeIndex = index;
			this.$emit("change",this.typeList[index]);
		},
		pageData(){
			let url = "";
			if(this.type == 'mall'){
				url = "api/mall/goods/v1/type";
			} else if(this.type == "integral"){
				url = "api/shop_integral/v1/goods_type";
			} 
			this.$http
				.get(url,{type:1401})
				.then(res => {
					this.typeList = this.typeList.concat(res);
					if(this.typeId){
						this.typeList.forEach((item,index) => {
							if(item.objId == this.typeId){
								this.typeIndex = index;
								this.$emit("change",item);
							}
						});
					} else {
						this.$emit("change",{
							name:"精选",
							objId:""
						});
					}
				});
		}
	}
};
</script>

<style lang="scss" scoped>
@import '@/style/mixin.scss';
.goods_type_select_box {
	width: 100%;
	background-color: #fff;
	&.pink {
		@include theme('gradient_bg');
		.goods_type_options {
			>view{
				color: #FFFFFF;
			}
			.active {
				color: #ffffff;
				&:after{
					background-color: #FFFFFF;
				}
			}
		}
	}
    &.vip {
        background-color: #f7f7f7;
    	.goods_type_options {
    		>view{
    			color: #333333;
    		}
    		.active {
                height: 48rpx;
                background-color: #eccc82;
                border-radius: 24rpx;
                color: #ffffff;
                font-size: 28rpx;
    			&:after{
    				content: inherit;
    			}
    		}
    	}
    }
	.goods_type_options {
		display: flex;
		align-items: center;
		position: relative;

		.active {
			font-size: 34rpx;
			color: $themeColor;
			font-weight: bold;
			&::after {
				content: '';
				position: absolute;
				left: 50rpx;
				right: 50rpx;
				bottom: 0rpx;
				height: 8rpx;
				background: $themeColor;
				border-radius: 4rpx;
			}
		}

		> view {
			display: flex;
			align-items: center;
			height: 88rpx;
			flex-shrink: 0;
			padding: 30rpx 40rpx;
			font-size: 28rpx;
			position: relative;
			color: #333;

			&::before {
				content: '';
				position: absolute;
				top: 50%;
				width: 2rpx;
				right: 0;
				height: 24rpx;
				transform: translateY(-50%);
				background: #cccccc;
			}
			&:last-child::before {
				content: inherit;
				width: 0;
			}
		}
	}
}
</style>
